<template>
<q-layout view="hHh Lpr fFf">
    <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-header :class="isShow?'back-dark shadow-7':'transparent'">
        <q-toolbar class="transparent " style="width: 100%; height: 50px">
            <q-btn @click="handleBack" flat round icon="mdi-keyboard-backspace"></q-btn>
            <div :class="$platform.inDesktop()?'text-h6':'text-subtitle1'" class="eslipsis">{{projectInfo.name}}</div>
            <!-- <q-img v-if="isShow" src="icons/一方映画logo200708竖版亮色.png" :width="$q.platform.is.mobile ? '150px' : '200px'" contain /> -->
            <q-space></q-space>

            <!-- <q-tabs dense shrink stretch v-model="tab" class="text-grey  shadow-7 full-height" active-color="primary" indicator-color="primary" inline-label align="justify" narrow-indicator @input="handleTabChange">
                <q-tab name="annunciate" label="通告" icon="mdi-bullhorn-outline" />
                <q-tab name="log" label="日志" icon="mdi-math-log" />

            </q-tabs> -->

            <q-space></q-space>

            <q-btn flat size="14px" dense icon="share" />
            <q-btn flat dense :class="isShow?'':'shadow-7'" icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />
            <!-- <q-bar dark style="height: 60px" class="transparent">

                  <q-space />

                  <q-btn flat dense  @click="handleMinWin" :class="isShow?'':'shadow-7'" icon="mdi-minus" class="items-center">

                      <q-tooltip>窗口还原(Esc)</q-tooltip>
                  </q-btn>
                  <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="crop_square" @click="handleMaxWin">
                      <q-tooltip>窗口最大化</q-tooltip>
                  </q-btn>
                  <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />

              </q-bar> -->
            <!-- <q-btn flat round dense icon="menu" class="mobile-only q-mr-sm" /> -->
        </q-toolbar>
    </q-header>
    <q-drawer @show="handleChildPageWidth" @hide="handleChildPageWidth" v-model="leftDrawer" :overlay="!$platform.inDesktop()" :width="300" :breakpoint="100" side="left" class="shadow-7" content-class="bg-dark " :behavior="!$platform.inDesktop()?'mobile':'default'">
        <!-- QScrollArea is optional -->
        <q-scroll-area style="height: calc(100% - 80px); margin-top: 80px" :thumb-style="{
          right: '4px',
          borderRadius: '5px',
          backgroundColor: '#009688',
          width: '5px',
          opacity: 0.75,
        }" :bar-style="{
          right: '2px',
          borderRadius: '9px',
          backgroundColor: '#03a9f4',
          width: '9px',
          opacity: 0.2,
        }" class="q-px-md ">

            <q-list v-if="tab=='annunciate'" class="text-teal-3">

                <q-item class="column q-mt-sm q-pa-none q-mb-sm shadow-7 " clickable v-for="item in shotplanList" :key="item.sp_id" @click="handleTaskSelect(item)" :active="curShotplan==item.sp_id" v-ripple active-class="bg-teal-8 text-white">
                    <q-item-section :class="curShotplan==item.sp_id?'':'bg-grey-9'">
                        <q-card class=" q-pa-sm bg-transparent  column item-center">
                            <tips-title :isPad="false" :title="item.sp_name" :tipStyle="'background:'+item.color +'!important'" lineColor="grey-6"></tips-title>
                            <div class="q-py-sm row items-center  justify-between ">
                                <div>
                                    <div>
                                        <q-icon class="q-mr-sm" name="mdi-clock-time-twelve-outline"></q-icon>{{item.sp_stime}}
                                    </div>
                                    <!-- <div>
                                        <q-icon class="q-mr-sm" name="mdi-clock-outline"></q-icon>{{item.etime}}
                                    </div> -->
                                </div>

                                <div class="row flex-center">
                                    <q-badge v-if="item.task_status==0" class="q-pa-sm" color="cyan-4">待开始</q-badge>
                                    <q-badge v-if="item.task_status==1" class="q-pa-sm" color="cyan-6">已完成</q-badge>
                                </div>
                            </div>

                        </q-card>
                    </q-item-section>

                    <!-- <q-item-section>
                        <q-badge>{{item.stime}}</q-badge>
                    </q-item-section>
                    <q-item-section>{{item.taskname}}</q-item-section> -->
                </q-item>

                <q-separator />

            </q-list>
            <q-list v-if="tab=='log'" class="text-teal-3">
                <q-item clickable v-ripple :active="curCollectionFolder=='all'" active-class="my-menu-link">
                    <q-item-section avatar>
                        <q-icon name="widgets" />
                    </q-item-section>
                    <q-item-section class="text-bold">全部</q-item-section>
                </q-item>
                <!-- <q-item class="q-ml-md " clickable v-for="item in typeList" :key="item.mt_id" @click="handleTaskSelect('type',item)" :active="curType==item.en_name" v-ripple active-class="bg-teal-8 text-white">
                  <q-item-section>{{item.name}}·{{ item.en_name }}</q-item-section>
              </q-item> -->

                <q-separator />

            </q-list>

        </q-scroll-area>
        <q-card flat class="absolute-top transparent q-py-sm q-px-md q-mt-md" style="height: 80px">
            <div class="bg-transparent row justify-between ">
                <div v-if="tab=='annunciate'" class="row items-center no-wrap justify-between full-width">
                    <div class="text-weight-bold text-h6">
                        通告列表
                        <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                    </div>

                    <q-select dark dense outlined v-model="status" @input="handleLoadTaskList" :options="statusOptions" map-options emit-value option-label="name" option-value="status" />
                </div>
                <div v-if="tab=='log'" class="text-weight-bold text-h6">
                    日志列表
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>

            </div>
            <q-separator color="grey-7" class="q-my-md"></q-separator>

        </q-card>

    </q-drawer>
    <!-- (Optional) The Footer -->
    <q-footer class="row back-dark shadow-up-7 items-center" :style="$platform.inDesktop()?'height:50px':'height:40px'">
        <!-- <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" /> -->
        <!-- <div id="MusicContainer" v-show="$platform.inDesktop()"></div>
        <div v-show="!$platform.inDesktop()" class="column full-width">

            <div class="row flex-center">
                <q-btn flat @click="handleBackward" icon="mdi-skip-backward"></q-btn>
                <q-btn flat @click="handlePrev" icon="mdi-skip-previous"></q-btn>
                <q-btn dense round outline color="primary" @click="handlePlay" :icon="isPlay?'mdi-pause':'mdi-play'"></q-btn>
                <q-btn flat @click="handleNext" icon="mdi-skip-next"></q-btn>
                <q-btn flat @click="handleForward" icon="mdi-skip-forward"></q-btn>
            </div>
            <div class="q-px-md q-mx-sm row no-wrap items-center">

                <q-slider @change="handleSeek" v-model="curTime" :min="0" :max="durationNum" />
                <div class="row no-wrap q-ml-sm">
                    <div>{{ currentTime }}</div>
                    <div>/{{ duration }}</div>
                </div>
            </div>

        </div> -->
    </q-footer>

    <q-page-container class="bg-grey-10">

        <!-- This is where pages get injected -->
        <router-view ref="ShotPlanContainer" />
    </q-page-container>

</q-layout>
</template>

<script>
import {
    loadTaskList,
    loadShotPlanList
} from 'assets/api/studio/shotplan.js'
import moment from 'moment';

export default {
    name: 'ShotplanLayout',
    data() {
        return {
            leftDrawer: true,
            pid: '',
            isUploadDialog: false,
            uploadheaders: {},
            recceList: [],
            isFull: false,
            isShow: true,
            fileNum: 0,
            isPlay: false,
            duration: '00:00',
            currentTime: '00:00',
            curTime: 0,
            durationNum: 100,
            shotplanList: [],
            curType: 'all',
            isLibrary: true,
            curShotplan: {},
            searchName: '',
            isSearch: false,
            tab: 'annunciate',
            curCollectionFolder: 'all',
            dataCount: 0,
            status: 0,
            statusOptions: [{
                    status: 0,
                    name: '待开始'
                },
                {
                    status: 1,
                    name: '已完成'
                },
            ]

        }
    },
    created() {

        if (this.$platform.inDesktop()) {
            //this.leftDrawer = true;
        };
        this.pid = this.$route.params.pid;

        this.projectInfo = this.$store.state.projectinfo;

        this.i_name = setInterval(() => {
          this.projectInfo = this.$store.state.projectinfo;
            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + '--拍摄通告';
                clearInterval(this.i_name)
            }

        }, 500);

        this.user = this.$store.state.user;
        this.handleLoadTaskList()
        // console.log(projectInfo);
    },
    mounted() {
        this.$emit('isSingle', true)
        if (this.$route.query.sp_id) {
            let sp_id = this.$route.query.sp_id;
            this.curShotplan = sp_id;

            if (!this.$platform.inDesktop()) {
                this.leftDrawer = false
            }

        }
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            // if (val) {
            //     this.isShow = false;
            // } else {
            //     this.isShow = true;
            // }

            console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
        }
    },
    beforeDestroy() {
        this.$emit('isSingle', false);
        this.$q.loading.hide()
    },
    methods: {
        handleChildPageWidth() {
            // this.$refs.MusicListContainer.handlePageWidth()
        },

        handleTabChange(val) {
            console.log('tabchange', val);
            if (val == 'collection') {

            }
            if (val == "library") {

            }
        },

        handleTaskSelect(item) {
            this.curShotplan = item.sp_id;
            // this.$refs.ShotPlanContainer.handleLoadShotPlanInfo(item.sp_id)
            console.log(item);
            this.$refs.ShotPlanContainer.handleLoadTaskInfo(item.sp_id)

            if (!this.$platform.inDesktop()) {
                this.leftDrawer = false
            }

        },
        handleLoadTaskList() {
            loadShotPlanList({
                pid: this.pid,
                status: this.status
            }).then(res => {
                if (res.data.code == 1) {
                    let data = res.data.data;
                    let obj = {};

                    data = data.reduce((cur, next) => {
                        obj[next.sp_id] ? "" : obj[next.sp_id] = true && cur.push(next);
                        return cur;
                    }, [])
                    // console.log(data);

                    data.forEach(i => {
                      console.log(i.stime);
                        i.sp_stime = this.$moment(i.stime, 'x').calendar()

                        i.sp_name = this.$moment(i.stime, 'x').format('YYYY-MM-DD')
                        console.log(i.stime);
                        if (this.$route.query.sp_id) {
                            if (i.sp_id == this.$route.query.sp_id) {
                                this.$refs.ShotPlanContainer.handleLoadTaskInfo(i.sp_id)

                            }

                        }
                    });

                    this.shotplanList = data;
                }

            })

        },

        handleBack() {
            this.$router.replace('/studio/' + this.pid)
        },

        handleMinWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .exit()
                .then(() => {
                    // v1.5.0+
                    // success!
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },
        handleMaxWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .request()
                .then(() => {
                    console.log(this.$refs);
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },

    }
}
</script>
